<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <th:block th:replace="common/header"></th:block>
    <th:block th:replace="common/nav"></th:block>

    <!--/*@thymesVar id="newsDto" type="com.healthtop.dto.NewsDto"*/-->
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                游戏详情管理
                <small>游戏详情管理新增/修改</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">游戏详情管理</a></li>

                <th th:if="${xsGameDetailsDto.mode==0}">
                    <li><a href="#">游戏详情添加</a></li>
                </th>
                <th th:if="${xsGameDetailsDto.mode==1}">
                    <li><a href="#">游戏详情编辑</a></li>
                </th>
                <th th:if="${xsGameDetailsDto.mode==2}">
                    <li><a href="#">游戏详情查看</a></li>
                </th>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <th th:if="${xsGameDetailsDto.mode==0}">
                                <h3 class="box-title">游戏详情信息添加</h3>
                            </th>
                            <th th:if="${xsGameDetailsDto.mode==1}">
                                <h3 class="box-title">游戏详情信息编辑</h3>
                            </th>
                            <th th:if="${xsGameDetailsDto.mode==2}">
                                <h3 class="box-title">游戏详情信息查看</h3>
                            </th>
                        </div>
                        <!-- /.box-header -->
                        <!-- form start -->
                        <form class="form-horizontal" id="myForm" action="/xsGameDetails/operate" method="post" enctype="multipart/form-data" >

                            <input type="hidden" name="id" th:value="${xsGameDetailsDto.id}">
                            <input type="hidden" name="mode" th:value="${xsGameDetailsDto.mode}">
                            <div class="container">
                                <div id="demo-form2" class="form-horizontal form-label-left">
                                    <div class="form-group">
                                        <label class="control-label col-md-2 col-sm-2 col-xs-12">游戏类目 <span class="required">*</span></label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <select id="gameId" name="gameId" class="form-control" required="required" onchange="changeArticleCategory()">
                                                <option value="">-请选择游戏类目-</option>
                                                <th:block th:each="e,index:${xsGameDetailsDto.gameCategoryList}">
                                                    <option th:value="${e.id}" th:text="${e.gameName}" th:selected="${e.id==xsGameDetailsDto.gameId}"></option>
                                                </th:block>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2 col-sm-2 col-xs-12">游戏文章类目 <span class="required">*</span></label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <select id="articleCategory" name="articleCategory" class="form-control" required="required">
                                                <option value="">-请选择游戏文章类目-</option>
                                                <th:block th:each="e,index:${xsGameDetailsDto.articleCategoryList}">
                                                    <option th:value="${e.id}" th:text="${e.name}" th:selected="${e.id==xsGameDetailsDto.articleCategory}"></option>
                                                </th:block>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2 col-sm-2 col-xs-12">文章标题<span class="required">*</span></label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <input type="text" id="title" name="title"  class="form-control" th:value="${xsGameDetailsDto.title}"></input>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2 col-sm-2 col-xs-12">文章作者<span class="required">*</span></label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <input type="text" id="author" name="author"  class="form-control" th:value="${xsGameDetailsDto.author}"></input>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2 col-sm-2 col-xs-12">文章简介<span class="required">*</span></label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <textarea id="introduction" name="introduction" style="width:100%;" maxlength="254" rows="5" th:text="${xsGameDetailsDto.introduction}"></textarea>
                                        </div>
                                    </div>

                                    <!--<div class="form-group">-->
                                        <!--<label class="col-sm-2 control-label">游戏详情图标</label>-->
                                        <!--<div class="col-md-9 col-sm-9 col-xs-12">-->
                                            <!--<input type="file" multiple id="selectPhoto" name="file" style="display: none;">-->
                                            <!--<div class="btn btn-success" style="border-radius: 5px;" onclick="selectPhoto();">上传本地照片照片</div>-->
                                            <!--<div style="width:100%;margin-bottom: 5px;padding-top: 10px">-->
                                                    <!--<span id="memberPhoto">-->
                                                         <!--<img id="avatarPreview" style=" width: 200px; height: auto" th:src="${xsGameDetailsDto.image}" th:if="${xsGameDetailsDto.gameDimageId!=0}">-->
                                                        <!--<img id="avatarPreview" src=""  style=" width: 200px; height: auto" th:if="${xsGameDetailsDto.gameDimageId == 0}"/>-->
                                                    <!--</span>-->
                                            <!--</div>-->
                                            <!--<input id="image" name="image" type="hidden"/>-->
                                        <!--</div>-->
                                    <!--</div>-->

                                    <div class="form-group">
                                        <input id="image" name="image" type="hidden"/>
                                        <label class="col-sm-2 control-label">游戏详情图标</label>
                                        <span class="field-validation-valid" data-valmsg-for="photoData" data-valmsg-replace="true"></span>
                                        <div class="col-sm-6">
                                            <label class="control-label">
                                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                                    上传本地照片
                                                </button>
                                            </label>
                                            <div id="memberPhoto" style="margin-top:10px">
                                                <img id="avatarPreview" style=" width: 150px; height: 100px" th:src="${xsGameDetailsDto.image}" th:if="${xsGameDetailsDto.gameDimageId!=0}">
                                                <img id="avatarPreview"  th:if="${xsGameDetailsDto.gameDimageId == 0}"/>
                                            </div>

                                        </div>

                                        <div>
                                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h4 class="modal-title">上传本地照片</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <input class="btn btn-info" type="file"  id="selectPhoto" onkeypress="return false;" onchange="javacript:previewImg(this);" style="margin: 0 auto;margin-bottom:10px;background: none;border:none;"/>
                                                                <div id="photoPreview" style="display:none;"></div>
                                                                <input type="hidden" id="backupImgSrc" value="" />
                                                                <div id="photoCanvasDiv" class="row text-center margin-top-md">
                                                                    <canvas id="photoCanvas" width="200px" height="216px" style="border: 1px solid gray;"></canvas>
                                                                </div>
                                                                <p class="row text-center margin-top-md">上传的照片若出现黑屏或者空白，请点击"加载"按钮</p>
                                                                <div class="row text-center">
                                                                    <input type="button" onclick="setRedrawImage();" value="加载" />
                                                                    <input type="button" onclick="setZoomIn();" value="放大" />
                                                                    <input type="button" onclick="setZoomOut();" value="缩小" />
                                                                    <input type="button" onclick="setMoveUp();" value="上" />
                                                                    <input type="button" onclick="setMoveDown();" value="下" />
                                                                    <input type="button" onclick="setMoveLeft();" value="左" />
                                                                    <input type="button" onclick="setMoveRight();" value="右" />
                                                                    <input type="button" onclick="setClockWise();" value="顺转" />
                                                                    <input type="button" onclick="setAntiClockWise();" value="逆转" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button class="btn btn-danger" data-dismiss="modal" type="button" onclick="savePhoto(200,216);">确定</button>
                                                            <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">取消</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-2 col-sm-2 col-xs-12">游戏详情介绍<span class="required">*</span></label>
                                        <div class="col-md-9 col-sm-9 col-xs-12">
                                            <textarea id="gameDetails" name="gameDetails" th:text="${xsGameDetailsDto.gameDetails}"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12" th:if="${xsGameDetailsDto.mode ==0}">
                                    <div class="form-group">
                                        <div class="text-center">
                                            <a href="/xsGameDetails/list"><input type="button" class="btn btn-primary" value="取消"/></a>
                                            <input type="submit" value="保存" class="btn btn-success" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12" th:if="${xsGameDetailsDto.mode ==1}">
                                    <div class="form-group">
                                        <div class="text-center">
                                            <a href="/xsGameDetails/list"><input type="button" class="btn btn-primary" value="取消"/></a>
                                            <input type="submit" value="修改" class="btn btn-success" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12" th:if="${xsGameDetailsDto.mode ==2}">
                                    <div class="form-group">
                                        <div class="text-center">
                                            <a href="/xsGameDetails/list"><input type="button" class="btn btn-primary" value="返回"/></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- /.box -->
                </div>
            </div>
            <!-- /.row -->
        </section>
    </div>

    <th:block th:replace="common/footer"></th:block>
</div>

<th:block th:replace="common/script"></th:block>
</body>
</html>
<!-- 加载编辑器的容器 -->

<script src="/ckeditor/ckeditor.js"></script>
<script src="/ckeditor/plugins/html5video/dialogs/html5video.js"></script>
<script src="/ckeditor/plugins/html5audio/plugin.js"></script>

<script type="text/javascript">
    window.onload = function(){
        CKEDITOR.replace( 'gameDetails',{
            removePlugins : 'save',
            filebrowserImageUploadUrl : "/xsGameDetails/upload?",
            language : 'zh-cn',
            image_previewText:' ',
            extraPlugins : 'html5video,html5audio',
            filebrowserHtml5videoUploadUrl : "/xsGameDetails/videoUpload?",
            filebrowserHtml5audioUploadUrl : "/xsGameDetails/videoUpload?"
        });
    };

    // function selectPhoto(){
    //     $("#selectPhoto").click();
    // }
    // $('#selectPhoto').on('change',function() {
    //     if(check(0)) {
    //         var obj = $("#selectPhoto")[0].files[0];
    //         var fr = new FileReader();
    //         fr.onload = function () {
    //             $("#avatarPreview").attr('src', this.result);
    //             $("#image").val(this.result);
    //         };
    //         fr.readAsDataURL(obj);
    //     }else{
    //         $("#image").val("");
    //         $("#avatarPreview").attr('src', "");
    //     }
    // });
    //
    // function check(i) {
    //     var file = document.getElementsByName("file")[i].valueOf();
    //     if(file=="")
    //     {
    //         alert("请选择文件");
    //         return false;
    //     }
    //     var strTemp = file.split(".");
    //     var strCheck = strTemp[strTemp.length-1];
    //     if(strCheck.toUpperCase()=='JPG'||strCheck.toUpperCase()=='PNG'||strCheck.toUpperCase()=='JPEG'||strCheck.toUpperCase()=='GIF')
    //     {
    //         return true;
    //     }else
    //     {
    //         alert('上传文件类型不对！');
    //         return false;
    //     }
    // }
    
    function changeArticleCategory() {
        $.get('/articleCategory/selectArticleCategoryByGameId?gameId='+$('#gameId').val(), function(data) {
            if(data) {
                var text = '<option value="">-请选择-</option>';
                for(var i=0;i<data.length;i++) {
                    text += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                }
                $('#articleCategory').html(text);
            }
        });
    }

</script>